import React from 'react'
import styled,{createGlobalStyle} from 'styled-components'

/**
 Finally, the ampersand can be used to increase the specificity of rules on the component; this can be useful if you are dealing with a mixed styled-components and vanilla CSS environment where there might be conflicting styles:

 increase the specificity of rules 增加css选择器的权重
 specificity n.特性;独特;特异;特殊性;特效;特征
*/
const Thing = styled.div`
  //&& 就是 自身与自身与选择器 目的是增加自身权重
  && {
    color: blue;
  }
`;

const GlobalStyle = createGlobalStyle`
  //styled-component可以直接作为选择器使用
  div${Thing} {
    color: red;
  }
`;

export default ()=>(
  <>
  <GlobalStyle />
  <Thing>
    I'm blue, da ba dee da ba daa
  </Thing>
  </>
)
